<template>
    <div class="login">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="login-panel">
        <h3 class="title">读者登录</h3>
        <el-form-item prop="number">
            <el-input type="text" v-model="ruleForm.number" placeholder="学号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input type="password" v-model="ruleForm.password" placeholder="密码"></el-input>
        </el-form-item>
        <el-checkbox v-model="checked" class="remember">记住密码</el-checkbox>
        <el-form-item>
            <el-button type="primary" class="btn-block" @click.native.prevent="submitForm('ruleForm')">登录
            </el-button>
        </el-form-item>
    </el-form>
    </div>
</template>

<script>

    import {login} from '../../../module/reader/reader/readerInfo'
    import { getCookie, setCookie, delCookie } from '../../../utils/cookie';
    export default {
        data () {
            return {
                ruleForm: {
                    number: '',
                    password: ''
                },
                rules: {
                    number: [
                        {required: true, message: '请输入学号', trigger: 'blur'},
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                    ]
                },
                checked: true
            }
        },
        mounted: function() {
            let _this = this;
            let r = getCookie('reader');
            //如果cookie里没有账号信息
            if(Boolean(r) === false){
                return false;
            } else {
                let reader = JSON.parse(r);
                _this.ruleForm.number = reader.number;
                _this.ruleForm.password = reader.password;
                _this.checked = true;
            }
        },
        methods: {
            doRememberPassword(){
                if (this.checked) {
                    console.log(this.ruleForm)
                    setCookie('reader', JSON.stringify(this.ruleForm), 3);
                } else {
                    delCookie('reader');
                }
            },
            submitForm(formName) {
                let _this = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        login(_this.ruleForm).then(result => {
                            if ('' !== result.data.id && undefined !== result.data.id) {
                                _this.doRememberPassword();
                                sessionStorage.setItem('readerName', result.data.username);
                                sessionStorage.setItem('readerId', result.data.id);
                                this.$router.push({path: '/reader/book/book-entry'});
                            } else {
                                this.$message.error('登陆失败! 用户名或密码错误');
                            }
                        })
                    } else {
                        return false;
                    }
                });
            }
        }
    }
</script>

<style>
    .login {
        padding-top: 25vh;
        text-align:center;
        background: black;
        height: 2000px;
    }
    .login-panel {
        background: white;
        margin: 0 auto;
        padding: 25px 40px;
        box-shadow: 0 0 25px #cac6c6;
        width: 300px;
    }
    .remember {
        margin-bottom: 10px;
    }
    .btn-block {
        width: 100%;
    }
</style>
